{% load staticfiles tag_ext %}

<div class="toolbar">
    <div class="pager">
        <p class="amount">
            Items {{ viewmodel.curPage.start_index }} to {{ viewmodel.curPage.end_index }} of {{ viewmodel.curPage.paginator.count }} total
        </p>
        <div class="limiter">
            <label> Show</label>
            <select onchange="setLocation(this.value)">
                <option {% if viewmodel.display_info.pSize == "9" %} selected="selected" {% endif %} value="{% generate_url 'pSize' 9 %}">
                    9 </option>
                <option {% if viewmodel.display_info.pSize == "15" %} selected="selected" {% endif %} value="{% generate_url 'pSize' 15 %}">
                    15 </option>
                <option {% if viewmodel.display_info.pSize == "30" %} selected="selected" {% endif %} value="{% generate_url 'pSize' 30 %}">
                    30 </option>
            </select>
            per page
        </div>
        <div class="pages">
            <strong>Page:</strong>
            <ol>
                {% if viewmodel.paginator.has_previous %}
                    <li><a href='{% generate_url 'pIndex' viewmodel.paginator.previous_page_number %}'>{{ viewmodel.paginator.previous_page_number }}</a></li>
                    <li><a title='Prev' href='{% generate_url 'pIndex' viewmodel.paginator.previous_page_number %}' class='next i-prev'><img class='v-middle' alt='Prev' src="{% static "img/pager_arrow_left.gif" %}" /></a></li>
                {% endif %}
                <li class='current'>{{ viewmodel.display_info.pIndex }}</li>
                {% if viewmodel.paginator.has_next  %}
                    <li><a href='{% generate_url 'pIndex' viewmodel.paginator.next_page_number %}'>{{ viewmodel.paginator.next_page_number }}</a></li>
                    <li><a title='Next' href='{% generate_url 'pIndex' viewmodel.paginator.next_page_number %}' class='next i-next'><img class='v-middle' alt='Next' src="{% static "img/pager_arrow_right.gif" %}" /></a></li>
                {% endif %}
            </ol>
        </div>
    </div>
    <div class="sorter">
        <p class="view-mode">
            <label> View as:</label>
            {% if viewmodel.display_info.mode == 'grid' %}
                <strong title="Grid" class="grid">Grid</strong>
            {% else %}
                <a href="{% generate_url 'mode' 'grid' %}" title="Grid" class="grid">Grid</a>
            {% endif %}
            {% if viewmodel.display_info.mode == 'list' %}
                <strong title="List" class="list">List</strong>
            {% else %}
                <a href="{% generate_url 'mode' 'list' %}" title="List" class="list">List</a>
            {% endif %}
        </p>
        <div class="sort-by">
            <label>Sort By</label>
            <select onchange="setLocation(this.value)">
                <option {% if viewmodel.display_info.orderBy|lower == "name" %} selected="selected" {% endif %} value="{% generate_url 'orderBy' 'name' %}">
                    Name  </option>
                <option {% if viewmodel.display_info.orderBy|lower == "price" %} selected="selected" {% endif %} value="{% generate_url 'orderBy' 'price' %}">
                    Price </option>
                <option {% if viewmodel.display_info.orderBy|lower == "gender" %} selected="selected" {% endif %} value="{% generate_url 'orderBy' 'gender' %}">
                    Gender </option>
            </select>
            {% if viewmodel.display_info.sortOrder == "asc" %}
                <a href="{% generate_url 'sortOrder' 'desc' %}" title="Set Descending Direction"><img src="{% static "img/i_asc_arrow.gif" %}" alt="Set Descending Direction" class="v-middle"></a>
            {% else %}
                <a href="{% generate_url 'sortOrder' 'asc' %}" title="Set Ascending Direction"><img src="{% static "img/i_desc_arrow.gif" %}" alt="Set Ascending Direction" class="v-middle"></a>
            {% endif %}
        </div>
    </div>
</div>